<template>
    <div>
        <ul>
            <li v-for="item in sceneInfo" :key="item.product_id" @click="goDetail(item.product_id)">
                <img :src="item.pro_pic_url" alt="">
                <p>{{item.pro_title}}</p>
                <p>
                    <span>{{item.country}}</span>|
                    <span>{{item.routing_data}}天{{item.routing_nigth}}晚</span>
                    <span><van-icon name="like-o" />{{item.collection_num}}</span>
                </p>
            </li>
        </ul>
    </div>
</template>

<script>
import Vue from 'vue';
import { Icon } from 'vant';

Vue.use(Icon);
export default {
    // 接收父组件的数据
    props:['country','continent'],
    data () {
        return {
            sceneInfo:[]
        };
    },

    components: {},

    computed: {},
    created(){
        // console.log(this.country)
        // console.log(this.continent)
        if(this.country != this.continent){
            // 请求体
            let reqBody1={
                "destination_region_list": [{"contry_list": [{"contry":this.country}], "destination_region": this.continent}],
                "pageNow": 1,
                "pageSize": 100,
                "product_type": 1
            }
            // 发送请求
            this.$http.post('http://www.51houniao.com/requirement/request/getMatchedProducts',reqBody1)
            .then(res=>{
                // 将获取的数据给data中的sceneInfo
                this.sceneInfo=res.matchedProducts
            })
        }else{
            // 请求体
            let reqBody3={
                // 输入的城市
                "keyWord": this.country,
                "pageNow": 1,
                "pageSize": 100,
                "product_type": 1
            }
            // 发送请求
            this.$http.post('http://www.51houniao.com/requirement/request/getMatchedProducts',reqBody3)
            .then(res=>{
                this.sceneInfo=res.matchedProducts
            })
        }
    },
    mounted() {},

    methods: {
        goDetail(id){
            this.$router.push("/detail/"+id)
        }
    }
}

</script>
<style scoped>
ul{
    margin-bottom:200px;
}
li{
    text-align: center;
    margin:20px;
    font-size:14px;
}
li img{
    width:330px;
    height:186px;
}
p:nth-of-type(2) span{
    display: inline-block;
    margin:0 10px;
}
</style>